<template>
  <div class="container">
    <!-- top -->
    <Header v-if="navPage==1" style="height:50px" class="header">猫眼电影</Header>
    <Header v-else-if="navPage==2">影院</Header>
    <!-- 电影 影院路由切换 -->
      <keep-alive>
        <router-view v-if="selectLists"></router-view>
      </keep-alive>
    <div class="tab_bar">
       <ul>
          <li><i class="iconfont icon-dianying" @click="pathToFlim"></i>电影</li>
          <li><i class="iconfont icon-dianyingyuan" @click="pathToCinema"></i>影院</li>
          <li><i class="iconfont icon-tubiaolunkuo-" @click="pathToMy"></i>我的</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';


import Header from '../views/header/header'
export default {
  data () {
    return {
      navPage: 1
    }
  },
   computed: {
    ...mapState(['currentCity','selectLists'])
  },
  components:{Header},
  methods: {
    pathToFlim () {
      if (this.$route.path !== '/home/film/nowplaying') {
        this.$router.push('/home/film/nowplaying')
        this.navPage = 1
      }
    },
    pathToCinema () {
      if (this.$route.path !== '/home/cinema') {
        this.$router.push('/home/cinema')
        this.navPage = 2
      }
    },
    pathToMy () {
      if (this.$route.path !== '/my') {
        this.$router.push('/my')
        this.navPage = 3
      }
    }
  }
}
</script>

<style>

.container{
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

} 
.header{
  position: relative;
  top:0;
  left: 0;
  right: 0;
}
.container .tab_bar {
    width: 100%;
    height: 50px;
    background: #fff;
    border-top: 1px solid #ebe8e3;
    position: fixed;
    left: 0;
    bottom: 0;
}
.container ul{
  height: 52px;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 50px;
}
li {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px
}
li .iconfont{
    font-size: 18px
}
</style>
